<!-- 基础信息 -->
<template>
    <div class="outer">
        <el-form ref="form" :model="form" label-width="7.29vw">
            <el-form-item label="专栏类型:" required>
                <el-radio-group v-model="form.type">
                    <el-radio :label="1">通用</el-radio>
                    <el-radio :label="2">问答</el-radio>
                    <el-radio :label="3">私享会</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="专栏名称:" required>
                <el-input v-model="form.title" placeholder="用 # 隔开多个词语，如：星期日#星期天"></el-input>
            </el-form-item>
            <el-form-item label="专栏作者:">
                <el-input v-model="form.author" placeholder="用 # 隔开多个名称，如：苏东坡#苏轼 "></el-input>
            </el-form-item>
            <el-form-item label="专栏备注:">
                <el-input v-model="form.remark" placeholder="请输入备注内容"></el-input>
            </el-form-item>

            <div class="upload" style="margin-bottom: 20px;">
                <el-form-item label="专栏封面:" required>
                    <label v-if="!imageUrl">
                        <div>
                            <input type="file" @change="onUpload" accept="image/*">
                            <div>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                            <span> （宽不要超过1280像素，高度等比显示）</span>
                        </div>
                    </label>
                    <label v-else>
                        <div>
                            <div class="avatar-uploader-icon" style="border: none;">
                                <el-image class="avatar-uploader-icon" style="border: none;" :src="imageUrl"
                                    :preview-src-list="srcList">
                                </el-image>
                                <i @click.prevent="delImg" class="el-icon-error close"></i>

                            </div>
                            <span> （宽不要超过1280像素，高度等比显示）</span>
                        </div>
                    </label>


                    <!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                       
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="form.dialogImageUrl" alt="">
                    </el-dialog> -->
                </el-form-item>
            </div>
            <div class="select">
                <el-form-item label="专栏标签:">
                    <el-select :popper-append-to-body="false" filterable remote v-model="form.topic_id" multiple
                        allow-create default-first-option placeholder="请输入标签名称" @change="onChange"
                        :remote-method="getInput" width="100px" @visible-change="isopen">
                        <el-option v-for="item in topic" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                        <el-option disabled class="load-more" v-if="showMore">
                            <span @click="load2">加载更多...</span>
                        </el-option>
                    </el-select>
                    <!-- <el-select @change="change" filterable v-model="form.topic_id" multiple placeholder="请输入搜索标签">
                        <el-option v-for="item in topic" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select> -->
                </el-form-item>
            </div>

            <div class="textarea">
                <el-form-item label="专栏推介:">
                    <el-input type="textarea" v-model="form.intro" placeholder=""
                        style="font-family: '微软雅黑';"></el-input>
                </el-form-item>
            </div>


            <el-form-item>
                <div class="btns">
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </el-form-item>


        </el-form>

    </div>
</template>
<script>
import { baseUrl } from '@/apis/index'
import axios from 'axios';

export default {

    data() {
        return {

            form: {
                title: '',
                remark: '',
                type: 1,
                author: '',
                intro: '',
                topic_id: [],
                thumb: ''
            },
            dialogVisible: false,
            selectedFile: null,
            uploadProgress: 0,
            srcList: [],
            imageUrl: '',
            id: '',

            // 标签分页
            totalPaget: 1,
            pageNumt: 1,
            topic: [],
            t_keyword: '',
            loadingt: false,
            newlist: [], // 请求参数数组
            choose: [], // 已选标签数组
            old_list: [], // 已绑定标签选择列表
            showMore: false
        }
    },
    created() {
    },
    mounted() {
        this.id = this.$route.query.id
        if (this.id) {
            this.getInfo()
        }
    },

    methods: {
        reset() {

            this.totalPaget = 1,
                this.pageNumt = 1,
                this.loadingt = false,
                this.t_keyword = '',
                this.showMore = false
            this.topic = []
        },

        // 关闭列表的时候
        isopen(e) {
            if (!e) {
                this.reset()
            }
        },
        load2() {
            var page = this.pageNumt
            //如果请求未结束就返回不连续请求
            if (this.loadingt) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPaget) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNumt = page
            this.getTopic()
        },

        getInput(keyword) {
            this.topic = this.old_list
            if (!keyword) {
                this.reset()

                return;
            }

            this.t_keyword = keyword
            this.getTopic()

        },

        // select选中后
        onChange(e) {
            // 重做选中的标签数组

            this.newlist = e.map(item => {
                return typeof item === 'string' ? { name: item } : { id: item };
            });
        },

        // 标签库
        getTopic() {
            this.loadingt = true
            let params = {
                keyword: this.t_keyword,
                page: this.pageNumt,
                ids: this.ids
            }

            this.$api.searchTopic(params).then(res => {
                let response = res.data.data
                if (res.data.code == 1) {
                    this.totalPaget = response.last_page
                    if (this.totalPaget <= this.pageNumt) {
                        this.showMore = false
                    } else {
                        this.showMore = true
                    }
                    if (this.ids && !this.keyowrd) {
                        this.old_list = response.data
                        console.log('old_list', this.old_list)

                    }

                    this.loadingt = false
                    this.topic = this.topic.concat(response.data);

                }
            })
        },


        // 获取专栏详情
        getInfo() {
            let params = {
                id: this.id
            }
            this.$api.colBasic(params).then(res => {
                console.log(res)
                if (res.data.code == 1) {
                    this.form = res.data.data
                    this.form.id = this.id  // 有id代表为更新操作
                    this.imageUrl = res.data.data.imageUrl
                    if (this.form.topic_id) {
                        this.ids = this.form.topic_id
                        this.getTopic()
                    }
                }
            })
        },

        change(e) {
            console.log(e);

        },
        delImg() {
            this.imageUrl = ''
            this.srcList = []
        },
        onUpload: function (e) {
            var that = this;
            var file = e.target.files[0];
            var formdata = new FormData();
            formdata.append("file", file, file.name) //通过append向form对象添加
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    'XX-token': localStorage.getItem('token'),
                    'XX-Device-Type': 'web'
                }
            }
            axios.post(baseUrl + "user/upload/one", formdata, config).then(function (res) {
                console.log("image", res)
                if (res.data.code == 10001) {
                    setTimeout(function () {
                        window.location.href = "{:url('User/login/index')}"
                    }, 3000)
                }
                if (res.data.code == 0) {
                    return false;
                }
                if (res.data.code == 1) {
                    that.imageUrl = res.data.data.url;
                    that.srcList.push(res.data.data.preview_url)
                    that.form.thumb = res.data.data.filepath

                }
            }).catch(function (error) {
                console.log("error", error);
                return false;
            })
        },

        handleAvatarSuccess(res, file) {
            console.log(file.raw);
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        },
        onSubmit() {
            console.log('表单提交的数据', this.form)
            this.form.topic_id = this.newlist

            let params = this.form
            this.$api.getBasic(params).then(res => {
                if (res.data.code == 1) {
                    let id = res.data.data
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.$emit('ids', id)

                    this.$router.push('/column/list?id=' + id)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.outer {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0 !important;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0 !important;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 2rem;
    color: #8c939d;
    width: 10rem;
    height: 10rem;
    line-height: 10rem;
    text-align: center;
    border: 0.01rem dashed #8c939d;
    position: relative;

    >img {
        width: 10rem;
        height: 10rem;
        border-radius: 10px;
    }

    .close {
        font-size: 30px;
        position: absolute;
        top: -15px;
        right: -15px;
        z-index: 2;
    }
}

.avatar {
    width: 10rem;
    height: 10rem;
    display: block;
}

.upload {
    display: flex;

    label {
        margin-right: 3rem;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        font-size: 1rem;
        color: #1a1a1a;

        input[type=file] {
            display: none;
            opacity: 0;
        }

        img {
            display: block;
            margin: 0 auto 0.8rem;
        }
    }
}
</style>